<script setup>
import axios from "axios";
import {onMounted, ref} from "vue";
//引入路由
import { useRouter } from 'vue-router'

const datalist = ref([])

onMounted(async () => {
  const getData = await axios({
    url: "https://m.maizuo.com/gateway?cityId=610100&pageNum=1&pageSize=10&type=1&k=9632889",
    headers: {
      'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"1700982879663830145269761"}',
      'X-Host': 'mall.film-ticket.film.list'
    }
  });
  datalist.value = getData.data.data.films
})
//定义路由
const router = useRouter()
const handleClick= (id)=> {
  router.push(`detail/${id}`)
}
</script>

<template>
  <div>
    <ul>
<!--      <router-link custom :to="'/detail/' + item.filmId" v-slot="{navigate}"-->
<!--                   v-for="item in datalist" :key="item.filmId">-->
<!--        <li @click="navigate">{{item.name}}</li>-->
<!--      </router-link>-->
      <li v-for="item in datalist" :key="item.filmId" @click="handleClick(item.filmId)">
        {{item.name}}
      </li>
    </ul>
  </div>
</template>

<style scoped lang="scss">
ul{
  list-style: none;
  li{
    padding: 10px;
  }
}
</style>